<script setup>
import { reactive, ref } from "vue";
import { getLogin, getRegister } from "../Api/user";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import FormDataFn from "./hooks/FormDataFn";
const router = useRouter();
const user = reactive({
  username: "",
  nickname: "",
  password: "",
  // avatar:""
});
const avatar = ref([]);
//弹框1
const show = ref(false);
const showRight = () => {
  show.value = true;
};

const submit = async () => {
  const res = await getLogin(user);
  console.log(res);
  if (res.data.code === 0) {
    localStorage.setItem("access_token", res.data.data.access_token);
    localStorage.setItem("refresh_token", res.data.data.refresh_token);
    router.push("/home");
  } else {
    alert(res.data.msg);
  }
};
//取消
const hyh = () => {
  show.value = false;
};

// 上传文件
const beforeRead = (file) => {
  if (file.type !== "image/jpeg") {
    showToast("请上传 jpg 格式图片");
    return false;
  }
  return true;
};
const afterRead = (file) => {
  console.log(file.file);
  user.avatar = file.file;
  // console.log(user.avatar.getAll("avatar"));
};

//注册
const zhuce = async () => {
  let formdata=new FormData()
  Object.keys(user).forEach((key)=>{
    formdata.append(key,user[key])
  })
  const res = await getRegister(formdata);
  console.log(res);
  if (res.code === 0) {
    showToast("注册成功");
    show.value = false;
  } else {
    show.value = false;
  }
};

</script>
<template>
  <van-icon name="cross" class="icon" />
  <h2>微信号/QQ号/邮箱登录</h2>
  <van-form>
    <van-cell-group inset>
      <van-field v-model="user.username" name="用户名" label="账号" placeholder="账号"
        :rules="[{ required: true, message: '请输入账号' }]" />
      <van-field v-model="user.password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请输入密码' }]" />
    </van-cell-group>
    <div class="shou">
      <a>用手机号登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a @click="showRight">没有账号？去注册</a>
    </div>
    <div style="margin: 16px">
      <van-button round block type="success" native-type="submit" @click="submit">
        登录
      </van-button>
    </div>
  </van-form>

  <div class="zhao">
    <p>
      找回密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;紧急冻结&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信安全中心
    </p>
  </div>
  <!-- 弹框 -->
  <van-popup v-model:show="show" position="right" :style="{ width: '100%', height: '100%' }">
    <van-icon name="arrow-left" class="icon" @click="hyh" />
    <h2>手机号注册</h2>

    <van-form @submit="obj">
      <van-cell-group class="bb">
        <van-field v-model="user.nickname" name="昵称" label="昵称" placeholder="昵称"
          :rules="[{ required: true, message: '昵称' }]" class="kk">
        </van-field>
        <van-uploader :before-read="beforeRead" :after-read="afterRead" class="aa" v-model="avatar" :max-count="1"
          reupload />
      </van-cell-group>
      <div class="yy">国家/地区 <b>中国大陆(+86)</b></div>
      <van-field v-model="user.username" name="账号" label="账号" placeholder="账号"
        :rules="[{ required: true, message: '请输入账号' }]" />
      <van-field v-model="user.password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请输入密码' }]" />
      <div style="margin: 16px">
        <van-button round block type="success" native-type="submit" @click="zhuce">
          注册
        </van-button>
      </div>
    </van-form>
    <div class="shou">
      <p>已有账号？去登录</p>
    </div>
  </van-popup>
</template>

<style scoped>
.icon {
  font-size: 20px;
  margin-top: 20px;
}

.yy {
  margin-left: 20px;
  margin-top: 10px;

  b {
    color: #0bcc22;
  }
}

.bb {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
}

h2 {
  font-size: 20px;
  margin: 20px 10px;
}

.shou {
  font-size: 14px;
  margin-left: 30px;
  color: #1989fa;
  margin-top: 20px;
}

.zhao {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 14px;
  margin-left: 5px;
  margin-top: 20px;
  color: #1989fa;
}
</style>
